<template>
  <div class="home">
    <div class="topHome">
      <h2>抽样公告</h2>
      <el-date-picker
        v-model="date"
        @change="onDateChange"
        size="small"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        style="float: right">
    </el-date-picker>
    </div>
    <el-table
      :data="tableData"
      v-loading="loading"
      @cell-click="getClickFood"
      style="width: 100%; min-height: 400px">
      <el-table-column
        prop="risk"
        label="风险">
      </el-table-column>
      <el-table-column
        prop="riskSubstance"
        label="检验项目">
      </el-table-column>
      <el-table-column
        prop="foodName"
        label="食品">
      </el-table-column>
      <el-table-column
        prop="sampleUnitName"
        label="被检样单位">
      </el-table-column>
      <el-table-column
        prop="producerName"
        label="生产商">
      </el-table-column>
      <el-table-column
        prop="dataSource"
        label="数据来源">
      </el-table-column>
    </el-table>

    <graph ref="graph" />
  </div>
</template>

<script>
import { getNotice } from '@/api/public'
import Graph from '@/components/Graph'

export default {
  name: 'Home',
  components: { Graph },
  data() {
    return {
      loading: false,
      date: '',
      tableData: [],
      chartsData: {}
    }
  },
  created() {
    const date = this.$route.query.date
    this.date = date || new Date()

    this.getNotice()
  },
  methods: {
    /**
     * 点击行
     */
    getClickFood(row, column, cell, event) {
      // console.log(row.id)
      // 该行的所有信息
      // console.log(column.property)
      // 它的label这一项可以判断是哪一列(中文名)，propert(英文名)
      // console.log(event)
      // console.log(cell)
      // 该单元格的信息
      let x = row.id
      let c = ''
      // (column.propert === 'foodName' || column.propert === 'producerName' || column.propert === 'riskSubstance' || column.propert === 'sampleUnitName')
      if (column.property === 'producerName') {
        c = x[0]
        x[1] = c
        // console.log(column.label)
      } else if (column.property === 'riskSubstance') {
        c = x[0]
        x[2] = c
      } else if (column.property === 'sampleUnitName') {
        c = x[0]
        x[3] = c
      }
      let query = {
        category: column.property,
        neoids: x.join(',')
      }
      return this.$refs.graph.show(query)
      // console.log(column.property)
      // x为要传送的neoids
      // this.toNext(query)
    },

    /**
     * 跳转到图谱
     */
    toNext(query) {
      this.$router.push({
        name: 'graph',
        query: {
          ...query
        }
      })
    },

    /**
     * 获取抽样公告
     */
    getNotice() {
      this.loading = true
      var that = this
      that.tableData = []
      getNotice({ date: this.date }).then((res) => {
        this.loading = false
        // let key

        for (let i = 0; i < res.dataSource.length; i++) {
          that.tableData.push({
            dataSource: res.dataSource[i],
            foodName: Object.keys(res.foodName.map(x => x)[i])[0], // 获取res.foodName第i个对象的第0个key值
            producerName: Object.keys(res.producerName.map(x => x)[i])[0],
            risk: Object.keys(res.risk.map(x => x)[i])[0],
            riskSubstance: Object.keys(res.riskSubstance.map(x => x)[i])[0],
            sampleUnitName: Object.keys(res.sampleUnitName.map(x => x)[i])[0],
            id: [res.foodName[i][Object.keys(res.foodName.map(x => x)[i])[0]], res.producerName[i][Object.keys(res.producerName.map(x => x)[i])[0]], res.riskSubstance[i][Object.keys(res.riskSubstance.map(x => x)[i])[0]], res.sampleUnitName[i][Object.keys(res.sampleUnitName.map(x => x)[i])[0]]]
          })
        }
        // for (var i = 0; i < res.dataSource.length; i++) {
        //   // console.log(Object.keys(res.foodName.map(x => x)[i])[0])
        //   console.log(Object.values(res.foodName.map(x => x)[i])[0])
        //   that.tableData.push((function() {
        //     var dateSim = {
        //       dataSource: '',
        //       foodName: '',
        //       producerName: '',
        //       risk: '',
        //       riskSubstance: '',
        //       sampleUnitName: '',
        //       id: []
        //     }
        //     dateSim.dataSource = res.dataSource[i]
        //     for (key in res.foodName[i]) {
        //       dateSim.foodName = key
        //       dateSim.id.push(res.foodName[i][key])
        //       // console.log(res.foodName[i][key])
        //     }
        //     for (key in res.producerName[i]) {
        //       dateSim.producerName = key
        //       dateSim.id.push(res.producerName[i][key])
        //     }
        //     for (key in res.risk[i]) {
        //       dateSim.risk = key
        //       // dateSim.id.push(res.risk[i][key])
        //     }
        //     for (key in res.riskSubstance[i]) {
        //       dateSim.riskSubstance = key
        //       dateSim.id.push(res.riskSubstance[i][key])
        //     }
        //     for (key in res.sampleUnitName[i]) {
        //       dateSim.sampleUnitName = key
        //       dateSim.id.push(res.sampleUnitName[i][key])
        //     }
        //     return dateSim
        //   })())
        // }
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 选择时间
     */
    onDateChange() {
      this.getNotice()
    }
  }
}
</script>

<style lang="scss" scoped>
.topHome {
  margin:10px 20px;
  h2 {
    display: inline-block;
  }
}

.home {
  height: calc(100vh - 160px);
  background: #fff;
  padding: 10px;
}
</style>
